<template>
 

  

       
  

 <!-- 搜索按钮 -->
  
  <div class="row">
    <div class="col-md-6 mx-auto">
      <div class="input-group">
        <input
          type="text"
          class="form-control input-sm"
          placeholder=""
          value=""
          v-model="keyWord"
        />
        <span class="input-group-btn">
          <div
            class=""
            @click="searchUser()"
            type="button"
          >&nbsp;&nbsp;
            <button class="btn btn-danger" aria-hidden="true"  >搜索</button
            >
          </div>
        </span>
      </div>
    </div>
  </div>
<br>
  <!-- 表格 -->
  <table class="table">
    <thead>
      <tr>
        <th>序号</th>
        <th>用户名</th>
        <th>密码</th>
        <th>性别</th>
        <th>电话</th>
         <th>权限</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="art in users" :key="art.id">
        <!-- //插值 插的是后端得到的属性，和数据库表里对应-->
        <td>{{ art.id }}</td>
        <td>{{ art.username }}</td>
         <td>{{ art.password }}</td>
          <td>{{ art.sex }}</td>
         <td>{{ art.phone }}</td>
         <td>{{ art.part }}</td>
        <td style="width: 200px">
           <button @click="addUser()" class="btn btn-success">增加</button>
          <button
            type="button"
           class="btn btn-success"
            @click="editUser(art)"
          >
            编辑
          </button>
          <button
            type="button"
            class="btn btn-success"
            @click="deleteUser(art.id)"
          >
            删除
          </button>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- 分页按钮 -->  
  <div class="paginations">  
    <button @click="prevPage" :disabled="currentPage === 1" class="fenye1"> << </button> &nbsp;&nbsp; 
    <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>  &nbsp;&nbsp;
    <button @click="nextPage" :disabled="currentPage === totalPages" class="fenye1">>></button>  
  </div>  
</template>

<script>
// 安装axios来传后端数据
// npm install axios --save
//导入axios，用它
import { http } from "../../utils/http.js";

// 表格里的数据
export default {
  data() {  
    return {  
      users: [],  
      keyWord: "",  
      currentPage: 1, // 当前页码  
      pageSize: 8, // 每页显示数量  
      total: 0, // 总记录数  
      totalPages: 0 // 总页数，需要计算  
    };  
  },  
  created() {  
    this.fetchUsers(); // 初始加载数据  
  },  
  methods: {  
    // 分页
    fetchUsers() {  
      this.fetchUsersPage(this.currentPage, this.pageSize);  
    },  
    fetchUsersPage(page, count) {  
      http.get(`/getUserList?page=${page}&count=${count}`)  
        .then(res => {  
          this.users = res.data.list;  
          this.total = res.data.total;  
          this.totalPages = Math.ceil(this.total / this.pageSize); // 计算总页数  
          console.log(res);  
        })  
        .catch(error => {  
          console.error(error);  
        });  
    },  
    handleCurrentChange(val) { // 这个方法通常与分页控件的某个事件绑定，但在这里我们直接调用fetchUsersPage  
      this.currentPage = val;  
      this.fetchUsersPage(val, this.pageSize);  
    },  
    prevPage() {  
      if (this.currentPage > 1) {  
        this.currentPage--;  
        this.fetchUsersPage(this.currentPage, this.pageSize);  
      }  
    },  
    nextPage() {  
      if (this.currentPage < this.totalPages) {  
        this.currentPage++;  
        this.fetchUsersPage(this.currentPage, this.pageSize);  
      }  
    },  

    deleteUser(id) {
      //后端传id
      http.get("/delete?id=" + id).then((res) => {
        // console.log(res)
        if (res.status === 200) {
          alert("删除成功");
        } else {
          alert("删除失败");
        }
        // 页面刷新
        this.$router.go(0);
      });
    },


    editUser(user) {
      // 跳转到EditUser页面
      this.$router.push({
        path: "/editUser",
        // 把参数带到编辑页面
        query: {
          //将数据格式化一下 JSON.stringify
          userInfo: JSON.stringify(user),
        },
      });
    },


    //点击增加时候跳转
    addUser() {
      this.$router.push("/addUser");
    },



    //搜索方法
     searchUser(){
       this.currentPage = 1; // 重置页码为1  
  http.get(`/getUserUsername?username=${this.keyWord}&page=${this.currentPage}&count=${this.pageSize}`)  
    .then(res => {  
      this.users = res.data.list;  
      this.total = res.data.total; // 更新总记录数（如果需要的话）  
      this.totalPages = Math.ceil(this.total / this.pageSize); // 计算总页数  
      console.log(this.keyWord);  
      this.users = res.data;
    })  
    .catch(error => {  
      console.error(error);  
    });  
    },

// searchUser() {
//       // /搜索方法

//       http.get("/getUserUsername?username=" + this.keyWord).then((res) => {
//         console.log(this.keyWord);
//         this.users = res.data;
//       });
//     },

   
}
  






};
</script>

<style scoped>
.btn-add {  
  margin-bottom: 5px;  
}  
  


/* 设置分页容器居中 */  
.paginations {  
    display: flex;  
    justify-content: center; /* 水平居中 */  
    align-items: center; /* 垂直居中（如果需要的话） */  
    margin-top: 20px; /* 可选，添加一些上边距 */  
}  
  
/* 设置分页按钮样式 */  
.fenye1 {  
    background-color: white; /* 设置白底 */  
    border: none; /* 去除默认边框 */  
    padding: 10px 20px; /* 添加内边距 */  
    margin: 0 5px; /* 添加外边距，用于按钮之间的间距 */  
    cursor: pointer; /* 鼠标悬停时显示小手图标 */  
}  
  
/* 禁用状态的按钮样式（可选） */  
.fenye1:disabled {  
    opacity: 0.5; /* 降低透明度 */  
    cursor: not-allowed; /* 禁用小手图标 */  
}  
  
/* 页码信息样式（可选） */  
.paginations span {  
    margin: 0 10px; /* 添加左右外边距，以便与按钮分隔 */  
}






</style>